<template id="appDownload">
  <div class="appDownload">
    <div class="pc">
      <div class="text">
        <img :src="pcMetaup" class="metaup" @dragstart.prevent />
        <img :src="line" class="line" @dragstart.prevent />
      </div>
      <div class="download">
        <div class="left">
          <img
            :src="android"
            @dragstart.prevent
            @click="downloadApk"
            class="android"
          />
          <img :src="ios" @dragstart.prevent @click="downloadIos" class="ios" />
        </div>
        <div class="right">
          <vue-qr :text="qrUrl" :size="156"></vue-qr>
          <img :src="logo" @dragstart.prevent class="logo" />
        </div>
      </div>
    </div>
    <div class="phone">
      <div class="text">
        <img :src="phoneMetaup" class="metaup" @dragstart.prevent />
        <img :src="line" class="line" @dragstart.prevent />
      </div>
      <div class="download">
        <img
          :src="android"
          @dragstart.prevent
          @click="downloadApk"
          class="android"
        />
        <img :src="ios" @dragstart.prevent @click="downloadIos" class="ios" />
      </div>
      <wx-tip></wx-tip>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import vueQr from "vue-qr";
import WxTip from "./WxTip.vue";
import { showMessage } from "@/utils";
import baseUrl from "@/utils/baseUrl.js";
export default {
  name: "appDownload",
  components: {
    vueQr,
    WxTip,
  },
  // 定义属性
  data() {
    return {
      pcMetaup: require("@/assets/images/appDownload/pcMetaup.png"),
      phoneMetaup: require("@/assets/images/appDownload/phoneMetaup.png"),
      line: require("@/assets/images/appDownload/line.png"),
      android: require("@/assets/images/appDownload/android.png"),
      ios: require("@/assets/images/appDownload/ios.png"),
      logo: require("@/assets/images/appDownload/logo.png"),
      qrUrl: "",
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    downloadApk() {
      // window.location.href = 'https://mupweb.oss-cn-hangzhou.aliyuncs.com/metaup.apk'
      window.location.href = "http://fir.imetaup.com/tqkx";
    },
    downloadIos() {
      showMessage("敬请期待", "warning");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.qrUrl = baseUrl.productionWeb + "/#/appDownload";
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.appDownload {
  .pc {
    margin-top: -2px;
    background: url("~@/assets/images/appDownload/pcBg.png");
    background-size: 100% 100%;
    width: 1920px;
    height: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text {
      margin-top: 228px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .metaup {
        width: 544px;
      }

      .line {
        width: 583px;
        margin-top: 24px;
      }
    }

    .download {
      width: 544px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 22px;

      .left {
        display: flex;
        flex-direction: column;

        .android {
          cursor: pointer;
          width: 351px;
        }

        .ios {
          cursor: pointer;
          width: 351px;
          margin-top: 18.6px;
        }
      }

      .right {
        width: 156px;
        height: 156px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .logo {
          width: 25px;
          position: absolute;
        }
      }
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .appDownload {
    height: 100%;

    .pc {
      display: none;
    }

    .phone {
      background: url("~@/assets/images/appDownload/phoneBg.png");
      background-size: 100% 100%;
      width: 100%;
      height: calc(100vh - 90px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .text {
        // margin-top: 378px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .metaup {
          width: 526px;
        }

        .line {
          width: 559px;
          margin-top: 24px;
        }
      }

      .download {
        width: 658px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 21px;

        .android {
          width: 375px;
        }

        .ios {
          width: 375px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
